<template>
  <el-breadcrumb class="isicons" :separator-icon="ArrowRight">
    <!-- <el-breadcrumb-item> -->
    <!-- <MapLocation class="icon" /> -->
    <!-- 当前位置
    </el-breadcrumb-item> -->
    <el-breadcrumb-item v-for="(item, index) in breadcrumbData" :key="index" :to="{ path: item.path }">{{
      item.title
    }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { MapLocation, ArrowRight } from "@element-plus/icons-vue";
const [route] = [useRoute()];
const breadcrumbData = ref<any>([]);
onMounted(() => {
  route.matched.forEach(r => {
    if (r?.meta?.title) {
      breadcrumbData.value.push({
        title: r?.meta?.title,
        path: r?.path
      });
    }
  });
});
</script>
<style lang="scss" scoped>
@import url(@/style/breadcrumbIcon.scss);
</style>
<style scoped>
:deep(.el-icon) {
  width: 0.5rem;
}
</style>
